<template>
  <div class="all">
      <div class="nar">
          <el-row>
              
              <el-col :span="6">
                  <i class="el-icon-s-grid"></i>
                  <el-select v-model="selectSubject" 
                             placeholder="请选择专业" 
                             clearable 
                             multiple 
                             filterable
                             
                  >
                      <el-option v-for="item in subjects"
                                 :key="item.label"
                                 :label="item.label"
                                 :value="item.value"
                      >
                      </el-option>
                  </el-select>
              </el-col>
              <el-col :span="6">
                  <i class="el-icon-s-grid"></i>
                  <el-select v-model="selectClass" placeholder="请选择班级" clearable multiple filterable>
                      <el-option v-for="item in classes"
                                 :key="item.label"
                                 :label="item.label"
                                 :value="item.value"
                      >
                      </el-option>
                  </el-select>
              </el-col>
              <el-col :span="6">
                  <i class="el-icon-s-grid"></i>
                  <el-select v-model="selectExperiment" placeholder="请选择实验" clearable filterable> 
                      <el-option v-for="item in experiments"
                                 :key="item.label"
                                 :label="item.label"
                                 :value="item.value"
                      >
                      </el-option>
                  </el-select>
              </el-col>
              <el-col :span="6">
                  <i class="el-icon-s-grid"></i>
                  <el-select v-model="selectType"  @change="thing(selectType)" placeholder="请选择实验类型" clearable filterable>
                      <el-option v-for="item in types"
                                 :key="item.label"
                                 :label="item.label"
                                 :value="item.value"   
                      >
                      </el-option>
                  </el-select>
              </el-col>
          </el-row>
      </div>
      <br>
      <div>
        <p class="pp" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" height:500px>请选择专业、班级、实验类型</p>
      </div>
  </div>
</template>

<script>
export default {
    
    data(){
        return{
            selectSubject:'',
            selectClass:'',
            selectExperiment:'',
            selectType:'',
            subjects:[
                {
                    value:1,
                    label:'计算机科学与技术'
                },
                {
                    value:2,
                    label:'软件工程'
                },
                {
                    value:3,
                    label:'大数据'
                },
                {
                    value:4,
                    label:'地信'
                }
            ],
            classes:[
                {
                    value:1,
                    label:'一班'
                },
                {
                    value:2,
                    label:'二班'
                },
                {
                    value:3,
                    label:'三班'
                },
                {
                    value:4,
                    label:'四班'
                }
            ],
            experiments:[
                {
                    value:1,
                    label:'实验一'
                },
                {
                    value:2,
                    label:'实验二'
                },
                {
                    value:3,
                    label:'实验三'
                },
                {
                    value:4,
                    label:'实验四'
                }
            ],
            types:[
                {
                    value:1,
                    label:'填空题'
                },
                {
                    value:2,
                    label:'判断题'
                },
                {
                    value:3,
                    label:'代码题'
                }
            ]
        }
    },
    methods:{
        //选择实验类型
        thing(ff){
                this.$router.push({path:"./subject"})
        }
    }
}
</script>

<style>
.pp{
    border-bottom-color: red;
    border-width:100%;
    line-height: 600px;
    font-size: 30px;
    background-color: rgb(154, 152, 152);
    margin: 0;
}
.el-icon-s-grid{
    font-size: 20px;
}
</style>